<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="../js/jquery-1.5.2.js"></script>
<script type="text/javascript" src="../js/jquery.verticalSlideOutMenu.js"></script>
<script type="text/javascript" src="../js/jquery.effects.core.js"></script>
<link rel="stylesheet" type="text/css" href="../css/jquery.verticalSlideOutMenu.css">

<style type="text/css">

#wrap
{
	padding-left:50px;
}
</style>
<script>
	$(document).ready(function(){
		$("#verticalMenuExample").verticalSlideOutMenu({
									accordion : true,
									active: 0,
									slideAnimation : 'easeInOutBounce',
									positionFixed: true,
									slideInOnLoad:  true,
									width : 250,
									selected : function()
									{
										//alert("In selected() --"+$(this).html());
									}
									
								});
	
								 
	});
	
	
</script>

</head>
<body>


<ul id="verticalMenuExample">
	<li><a href="#">Header 1</a>
		<ul>
			<li><a href="#">Topic 1</a>
			 
				<ul>
					<li><a href="#">Sub Topic 1</a>
						<ul>
							<li><a href="#">section 1 section 1</a></li>
							<li><a href="#">section 2</a></li>
						</ul>
					</li>
					<li><a href="#">Sub Topic 2</a></li>
				</ul>
			</li>
			<li><a href="#">Topic 2</a></li>
			<li><a href="#">Topic 3</a></li>
		</ul>
	</li>
	
	</li>
	
	<li><a href="#">Header 2</a>
		<ul>
			<li><a href="#">Topic 1</a></li>
			<li><a href="#">Topic 2</a></li>
			<li><a href="#">Topic 3</a></li>
		</ul>
	</li>

	<li><a href="#">Header 3</a>
		<ul>
			<li><a href="#">Topic 1</a></li>
			<li><a href="#">Topic 2</a></li>
			<li><a href="#">Topic 3</a></li>
		</ul>
	</li>
	
	<li><a href="#">Header 4</a>
		<ul>
			<li><a href="#">Topic 1</a></li>
			<li><a href="#">Topic 2</a></li>
			<li><a href="#">Topic 3</a></li>
		</ul>
	</li>
	 
	 <li><a href="#">Header 5</a>
		<ul>
			<li><a href="#">Topic 1</a></li>
			<li><a href="#">Topic 2</a></li>
			<li><a href="#">Topic 3</a></li>
		</ul>
	</li>
</ul>

 

<div id="wrap">
        <div id="header">
            <h1>Working example of the verticalSlideOutMenu jQuery plugin</h1>
        </div>        
        
        <div id="content">
            
            <p> If you click the button on the left it will slide out. This plugin allows you to easily create a vertical menu. It also allows you to hide the menu when you are done using it, thus saving space.</p>
            <h2>Getting started</h2>
			
			In your &lt;head&gt; tag you need the following javascript and css file.
			
			<pre>
			
			<h4> Jquery Library</h4>
			&lt;script type="text/javascript" src="jquery-1.5.2.js">&lt;/script&gt;
			<h4> Vertical Slide Out Menu Library</h4>
			&lt;script type="text/javascript" src="jquery.verticalSlideOutMenu.js">&lt;/script&gt;
			<h4> Effects core plugin for slide out animation (Optional)</h4>
			&lt;script type="text/javascript" src="jquery.effects.core.js">&lt;/script&gt;
			<h4> Vertical Slide Out Menu CSS</h4>
			&lt;link rel="stylesheet" type="text/css" href="jquery.verticalSlideOutMenu.css"&gt;

			&lt;script&gt;
			$(function()
			{
				$("#verticalMenuExample").verticalSlideOutMenu({
					accordion : true,    // If you want the menu to be in accordion style
					active: 0,			 // Applicable when accordion is set to true. Using this you can control which section you want to display on load.
					slideAnimation : 'easeInOutBounce', // Used for slide animation. To use this you need to include jquery effects core plugin
					positionFixed: true,        // true makes it stick(fixed position) on scroll
					slideInOnLoad:  true,       // If set to true the menu will be hidden on load
					width : 500,			     // Width of the vertical menu which is 300px by default
					selected : function()        // Function which gets triggered when a menu item gets selected
					{
						//alert("In selected() --"+$(this).html());
					}
									
				});
			});

			 &lt;/script&gt;
		
			</pre>
			Anywhere in your &lt;body&gt; tag include the following html code
			
		<pre>
		
	&lt;ul id="verticalMenuExample">		
		&lt;li>&lt;a href="#">Header 1&lt;/a&gt;
			&lt;ul&gt;
				&lt;li&gt;&lt;a href="#"&gt;Topic 1&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#"&gt;Topic 2&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#"&gt;Topic 3&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;Header 2&lt;/a&gt;
			&lt;ul&gt;
				&lt;li&gt;&lt;a href="#"&gt;Topic 1&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#"&gt;Topic 2&lt;/a&gt;&lt;/li&gt;
				&lt;li&gt;&lt;a href="#"&gt;Topic 3&lt;/a&gt;&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
		
	</pre>		
	<div>
		<p>&copy; Anubhav Bhojne </p>
	</div>
	
	<div>
        <h3 class="">Contact me</h3>
        <a href="mailto:anubhav.bhojne@gmail.com">anubhav.bhojne@gmail.com</a><br><br>
        <p>Thanks for checking out my jQuery plugin, I hope you find this plugin useful.</p>
        
    </div>
</div>
</body>
</html>